<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
		div {
			margin: 0 auto;
			width: 100px;
			height: 100px;
			background: red;
			transform: rotateX(30deg);
			-webkit-transform: rotateX(120deg);	/* Safari 和 Chrome */
			-moz-transform: rotateX(120deg);	/* Firefox */
		}
		#div1 {
			margin: 0 auto;
			width: 100px;
			height: 100px;
			background: red;
			transform: rotateY(120deg);
			transform-origin: 30px 30px;
			-webkit-transform: rotateY(120deg);	/* Safari 和 Chrome */
			-moz-transform: rotateY(120deg);	/* Firefox */
		}
	</style>
</head>
<body>
	<!-- 
	CSS3 允许您使用 3D 转换来对元素进行格式化。
	Internet Explorer 10 和 Firefox 支持 3D 转换。

	Chrome 和 Safari 需要前缀 -webkit-。

	Opera 仍然不支持 3D 转换（它只支持 2D 转换）。
	rotateX() 方法
	通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
-------------------------------------------------------------
	rotateY() 旋转
	通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
	transform-origin: 30px 30px;  设置旋转元素的基点位置：
	Internet Explorer 10、Firefox、Opera 支持 transform-origin 属性。

	Internet Explorer 9 支持替代的 -ms-transform-origin 属性（仅适用于 2D 转换）。

	Safari 和 Chrome 支持替代的 -webkit-transform-origin 属性（3D 和 2D 转换）。

	Opera 只支持 2D 转换。
	transform-origin: x-axis y-axis z-axis;  默认值：	50% 50% 0
	x-axis	
	定义视图被置于 X 轴的何处。可能的值：

	left
	center
	right
	length
	%
	y-axis	
	-------------------------------------------------------------
	定义视图被置于 Y 轴的何处。可能的值：

	top
	center
	bottom
	length
	%
	-------------------------------------------------------------
	z-axis	

	定义视图被置于 Z 轴的何处。可能的值：

	length
	 -->
	 <!-- <div>
	 	12
	 </div> -->
	 <div id="div1">
	 	
	 </div>
</body>
</html>